<template>
  <div>
      <p>zhe\新闻中心</p>
      <div class="fu">
        这是服务端放回的数据  asyncData
        <ul>
        <li v-for="(list,index) in  newsList" :key="index" @click="go(list.id)">
            {{list.title}}
        </li>
      </ul>
      </div>
      

      <div class="ke">
        这这是客户端渲染的数据
        <ul>
           <li v-for="(list,index) in  news" :key="index">
            {{list.title}}
           </li>
        </ul>
        
      </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
   name:'news',
   //这是客户端的data
   data(){
     return {
       news:''
     }
   },
   computed:{
      ...mapState('user',['lang'])
   },
   async mounted(){
     let res=await this.$axios.get("http://localhost:4000/news-list?num=10&lang="+this.lang)
     this.news=res.data.list
   },
 

   //这是服务端的data
   async asyncData({$axios,store}){
     
     let res = await $axios.get("http://localhost:4000/news-list?num=10&lang="+store.state.user.lang)
      return {
        newsList:res.data.list
      }
   },
   methods:{
     go(id){
       this.$router.push(`/news/${id}`)
     }
   }
}
</script>

<style lang="scss" scoped>
   .ke{
     width: 100%;
     border: 2px solid red;
     padding: 5px;
   }

   .fu{
     width: 100%;
     border: 1px solid green;
     padding: 6px;
     box-shadow: 1px 2px blue;
   }
</style>